<!doctype html>
<html>
<head>
<!-- Copyright 2019 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->
<meta charset="utf-8">
<script type="module" src="autofill_and_password_manager_internals.js"></script>
<link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
<!--
  The style sheets are inlined to get a prettier export if the user presses
  Ctrl/Cmd + S to save the site or presses the download button.
-->
<style>
html {
  scroll-behavior: smooth;
}

.sticky-bar {
  background-color: white;
  border-bottom: 1px solid black;
  color: black;
  overflow: auto;
  padding-bottom: 1.5ex;
  position: sticky;
  top: 0;
}

#log-display-config {
  display: none; /* only visible for Autofill, not for Password Manager */
  font-size: 120%;
  padding: 1ex;
}

#log-display-config label {
  padding-inline-end: 1em;
}

.fake-button {
  background-color: lightgray;
  border: 1px solid black;
  margin-inline-end: 1em;
  padding: .5ex;
}

#logging-note {
  font-style: italic;
}

#logging-note-incognito {
  font-style: italic;
}

/* Initially, nothing is visible, to avoid flicker. */
#log-entries,
#logging-note,
#logging-note-incognito {
  display: none;
}

/* Visibility settings for non-Incognito tabs. */
[data-incognito=false] #log-entries,
[data-incognito=false] #logging-note {
  display: block;
}

/* Visibility settings for Incognito tabs. */
[data-incognito=true] #logging-note-incognito {
  display: block;
}

#version-info {
  margin: 3px;
  padding: 3px;
}

.version {
  font-family: monospace;
  max-width: 430px;
  padding-inline-start: 5px;
  vertical-align: top;
  word-break: break-word;
}

.label {
  font-family: monospace;
  font-weight: 200;
  vertical-align: top;
}

.log-entry,
.marker {
  padding: 3px;
}

.marker {
  background-color: red;
  font-size: 200%;
  overflow-wrap: break-word;
  white-space: normal;
  word-wrap: break-word;
}

.marker::before {
  content: 'Position marked: ';
}

/*
 * Colors can be taken from
 * https://material.io/design/color/#tools-for-picking-colors
 * Pick the rows of entries labeled with 100
 */

.log-entry[scope='Context'] {
  background-color: #F5F5F5;
}

.log-entry[scope='Parsing'] {
  background-color: #FFECB3;
}

.log-entry[scope='AbortParsing'] {
  background-color: #FFCDD2;
}

.log-entry[scope='Filling'] {
  background-color: #D1C4E9;
}

.log-entry[scope='Submission'] {
  background-color: #BBDEFB;
}

.log-entry[scope='AutofillServer'] {
  background-color: #D7CCC8;
}

.log-entry[scope='Metrics'] {
  background-color: #B2EBF2;
}

.log-entry[scope='AddressProfileFormImport'] {
  background-color: #BFFBF2;
}

.log-entry[scope='CreditCardUploadStatus'] {
  background-color: #4DB6AC;
}

.log-entry[scope='CardUploadDecision'] {
  background-color: #4DD0E1;
}

.log-entry[scope='Rationalization'] {
  background-color: #F8BBD0;
}

/*
 * Checkboxes add/remove hide-<Scope> classes to the #log-entries. Hiding of the
 * relevant <div>'s and adjacent <hr>'s is implemented by these classes.
 */

.hide-Context .log-entry[scope='Context'],
.hide-Context .log-entry[scope='Context'] + hr {
  display: none;
}

.hide-Parsing .log-entry[scope='Parsing'],
.hide-Parsing .log-entry[scope='Parsing'] + hr {
  display: none;
}

.hide-AbortParsing .log-entry[scope='AbortParsing'],
.hide-AbortParsing .log-entry[scope='AbortParsing'] + hr {
  display: none;
}

.hide-Filling .log-entry[scope='Filling'],
.hide-Filling .log-entry[scope='Filling'] + hr {
  display: none;
}

.hide-Submission .log-entry[scope='Submission'],
.hide-Submission .log-entry[scope='Submission'] + hr {
  display: none;
}

.hide-AutofillServer .log-entry[scope='AutofillServer'],
.hide-AutofillServer .log-entry[scope='AutofillServer'] + hr {
  display: none;
}

.hide-Metrics .log-entry[scope='Metrics'],
.hide-Metrics .log-entry[scope='Metrics'] + hr {
  display: none;
}

.hide-AddressProfileFormImport .log-entry[scope='AddressProfileFormImport'],
.hide-AddressProfileFormImport .log-entry[scope='AddressProfileFormImport'] + hr {
  display: none;
}

.hide-CreditCardUploadStatus .log-entry[scope='CreditCardUploadStatus'],
.hide-CreditCardUploadStatus .log-entry[scope='CreditCardUploadStatus'] + hr {
  display: none;
}

.hide-CardUploadDecision .log-entry[scope='CardUploadDecision'],
.hide-CardUploadDecision .log-entry[scope='CardUploadDecision'] + hr {
  display: none;
}

.form {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.form td {
  vertical-align: text-top;
}

.profile_import_from_form_section {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.profile_import_from_form_section td {
  vertical-align: text-top;
}

.country_data {
  border: 1px black solid;
  margin: 3px;
  padding: 3px;
}

.country_data td {
  vertical-align: text-top;
}

.modal-dialog {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 0, 0);
  display: block;
  height: 100px;
  left: 10%;
  overflow: auto;
  position: fixed;
  right: 10%;
  top: 10%;
  width: 80%;
  z-index: 1;
}

.modal-dialog-content {
  padding: 20px;
}

.modal-dialog-close-button {
  bottom: 20px;
  position: absolute;
  right: 20px;
}

</style>
</head>
<body>
<div>
  <h1 id="h1-title"></h1>
  <div id="log-display-config">
    <span id="marker-fake-button" class="fake-button">Add Marker</span>
    <input type="checkbox" id="enable-autoscroll" checked><label for="enable-autoscroll">Enable autoscroll</label>
    <span id="checkbox-placeholder"></span>
    <span id="reset-cache-fake-button" class="fake-button" style="display: none">Reset Cache</span>
    <span id="download-fake-button" class="fake-button">Download Log</span>
  </div>
</div>
<div id="logging-note"></div>
<div id="logging-note-incognito"></div>
<div id="version-info">
  <table>
    <tr>
      <td class="label">Version:</td>
      <td class="version"><span>$i18n{version}</span>
        (<span>$i18n{official}</span>)
        <span>$i18n{version_modifier}</span></td>
    </tr>
    <tr>
      <td class="label">Revision:</td>
      <td class="version"><span>$i18n{cl}</span></td>
    </tr>
    <tr>
      <td class="label">User Agent:</td>
      <td class="version"><span>$i18n{useragent}</span></td>
    </tr>
    <tr>
      <td class="label">App Locale:</td>
      <td class="version"><span>$i18n{app_locale}</span></td>
    </tr>
    <tr>
      <td class="label">Variations:</td>
      <td class="version" id="variations-list"></td>
    </tr>
  </table>
</div>
<div id="log-entries">
</div>
</body>
</html>
